<template>
  <div>
    <HeaderNav title="编辑资料" />
    <div class="avatarWrapper">
      <!-- 图片上传组件 -->
      <van-uploader :after-read="afterRead">
        <img
          v-if="userInfo.head_img"
          :src="$axios.defaults.baseURL + userInfo.head_img"
          alt
          class="avatar"
        />
        <img
          v-else
          class="avatar"
          src="https://wx1.sinaimg.cn/mw690/dab20f8dgy1gfrw58arx0j22c0340b2b.jpg"
          alt
        />
      </van-uploader>
    </div>
    <PersonalBar labelText="昵称" :descText="userInfo.nickname" @handleClick="isShowNickname = true" />
    <PersonalBar labelText="密码" descText="******" @handleClick="isShowPassword = true" />
    <PersonalBar
      labelText="性别"
      :descText="userInfo.gender == 1?'小哥哥':'小姐姐'"
      @handleClick="isShowGender = true"
    />

    <van-dialog v-model="isShowNickname" title="修改昵称" show-cancel-button @confirm="setNickname">
      <van-field placeholder="请输入新昵称" v-model="newNickname" />
    </van-dialog>

    <van-dialog v-model="isShowPassword" title="修改密码" show-cancel-button @confirm="setPassword">
      <van-field placeholder="请输入新密码" v-model="newPassword" type="password" />
    </van-dialog>

    <van-action-sheet
      v-model="isShowGender"
      :actions="genderList"
      @select="setGender"
      cancel-text="取消"
    />
  </div>
</template>

<script>
import HeaderNav from "@/components/HeaderNav";
import PersonalBar from "@/components/PersonalBar";

export default {
  data() {
    return {
      userInfo: "",
      isShowNickname: false,
      isShowPassword: false,
      isShowGender: false,
      genderList: [
        {
          name: "小哥哥",
          gender: 1,
        },
        {
          name: "小姐姐",
          gender: 0,
        },
      ],
      newNickname: "",
      newPassword: "",
    };
  },
  components: {
    HeaderNav,
    PersonalBar,
  },
  created() {
    this.loadPage();
  },
  methods: {
    // 这个上传组件选择完图片触发这个回调
    // 在这里形参可以接受一个文件数据对象, 其中要上传的文件就在 fileObj.file 里面
    // 创建 FormData 对象, 将图片文件按照 api 要求的字段名插入其中
    afterRead(fileObj) {
      const fd = new FormData();
      fd.append("file", fileObj.file);
      // 这个 fd 就是要上传的 data 直接传入即可
      this.$axios({
        method: "post",
        url: "/upload",
        data: fd,
        headers: {
          Authorization: "Bearer " + localStorage.getItem("token"),
        },
      }).then((res) => {
        // 这里可以获取到服务器中的图片访问路径
        console.log(res.data.data.url);
        // 2. 使用这个图片的网络地址修改用户信息即可
        this.editProfile({
          head_img: res.data.data.url,
        });
      });
    },

    loadPage() {
      this.$axios({
        url: "/user/" + localStorage.getItem("userId"),
      }).then((res) => {
        console.log(res.data);
        this.userInfo = res.data.data;
      });
    },
    setNickname() {
      // console.log(666);
      this.editProfile({
        nickname: this.newNickname,
      });
      this.newNickname = "";
    },
    setPassword() {
      this.editProfile({
        password: this.newPassword,
      });
      this.newPassword = "";
    },
    setGender(genderSelected) {
      this.editProfile({
        gender: genderSelected.gender,
      });
    },
    editProfile(newData) {
      this.$axios({
        method: "post",
        url: "/user_update/" + localStorage.getItem("userId"),
        data: newData,
      }).then((res) => {
        console.log(res);
        this.loadPage();
      });
    },
  },
};
</script>

<style lang="less" scoped>
.avatarWrapper {
  height: 138/360 * 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  .avatar {
    width: 70/360 * 100vw;
    height: 70/360 * 100vw;
    object-fit: cover;
    border-radius: 50%;
  }
}
</style>